<template>
  <div class="banner-container">
    <div class="moveBox" ref="moveBox">
      <!-- <img src="../../../assets/image/banner4.jpg" />
      <img src="../../../assets/image/banner1.jpg" />
      <img src="../../../assets/image/banner2.jpg" />
      <img src="../../../assets/image/banner3.jpg" />
      <img src="../../../assets/image/banner4.jpg" />
      <img src="../../../assets/image/banner1.jpg" /> -->
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/137/banner4.jpg"
        alt=""
      />
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/137/banner1.jpg"
        alt=""
      />
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/137/banner2.jpg"
        alt=""
      />
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/137/banner3.jpg"
        alt=""
      />
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/137/banner4.jpg"
        alt=""
      />
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/137/banner1.jpg"
        alt=""
      />
    </div>
    <div class="arrow leftArrow" @click="handleMove('left')">
      <i class="fa fa-angle-left"></i>
    </div>
    <div class="arrow rightArrow" @click="handleMove('right')">
      <i class="fa fa-angle-right"></i>
    </div>

    <div class="bannerInfo">
      <span class="line"></span>
      <div class="gameName">
        <div class="game">
          <div class="gameContent" ref="moveContentBox">
            <span class="zh">{{ Data.text[Data.pageCount].cname }}</span>
            <span class="en">{{ Data.text[Data.pageCount].ename }}</span>
          </div>
        </div>
      </div>
      <span class="line"></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive, onBeforeUpdate } from "vue";
const moveBox = ref();
const moveContentBox = ref();
const Data = reactive({
  pageCount: 1,
  timer: null,
  text: [
    {
      cname: "巫师3",
      ename: "The Witcher 3",
    },
    {
      cname: "孤岛危机3",
      ename: "Crysis 3",
    },
    {
      cname: "刺客信条",
      ename: "Assassin's Creed",
    },
    {
      cname: "战神4",
      ename: "God Of War 4",
    },
    {
      cname: "巫师3",
      ename: "The Witcher 3",
    },
    {
      cname: "孤岛危机3",
      ename: "Crysis 3",
    },
  ],
});
onMounted(() => {
  autoMove();
});

onBeforeUpdate(() => {
  textMove();
});

onUnmounted(() => {
  clearInterval(Data.timer);
  Data.timer = null;
});

// 无缝轮播滚动
const move = (type) => {
  if (type === "right" && Data.pageCount === 5) {
    // 先删除过渡效果，切换到第一张
    Data.pageCount = 1;
    moveBox.value.style = "transition:none;";
    moveBox.value.style.left = `-${Data.pageCount}00vw`;
    // 补充过渡效果，切换到第二张，实现无缝衔接
    setTimeout(() => {
      moveBox.value.style = "transition:0.3s";
      moveBox.value.style.left = `-${++Data.pageCount}00vw`;
    }, 0);
    return;
  } else if (type === "left" && Data.pageCount === 0) {
    Data.pageCount = 4;
    moveBox.value.style = "transition:none;";
    moveBox.value.style.left = `-${Data.pageCount}00vw`;
    setTimeout(() => {
      moveBox.value.style = "transition:0.3s";
      moveBox.value.style.left = `-${--Data.pageCount}00vw`;
    }, 0);
    return;
  }
  type === "right"
    ? (moveBox.value.style.left = `-${++Data.pageCount}00vw`)
    : (moveBox.value.style.left = `-${--Data.pageCount}00vw`);
};

// 处理切换轮播事件
const handleMove = (type) => {
  clearInterval(Data.timer);
  Data.timer = null;
  move(type);
  autoMove();
};

// 自动轮播
const autoMove = () => {
  Data.timer = setInterval(() => {
    move("right");
  }, 4000);
};

const textMove = () => {
  moveContentBox.value.style = "top:150px;  opacity: 0;transition: none;";
  setTimeout(() => {
    moveContentBox.value.style = "top:0;  opacity: 1;transition: all 0.5s;";
  }, 200);
};
</script>

<style scoped lang="less">
.banner-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .moveBox {
    position: absolute;
    z-index: -999;
    height: 100vh;
    display: flex;
    left: -100vw;
    top: 0;
    transition: all 0.3s;
    img {
      width: 100vw;
      height: 100vh;
    }
  }
  .arrow {
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    font-size: 60px;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .leftArrow {
    left: 10px;
  }
  .rightArrow {
    right: 10px;
  }
  .bannerInfo {
    position: absolute;
    display: flex;
    align-items: flex-end;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    // height: 70px;
    width: 70%;
    .gameName {
      position: relative;
      height: 200px;
      width: 400px;
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      border-radius: 400px 400px 0 0;
      margin: 0 20px;
      .game {
        width: 200px;
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        top: 50%;
        left: 50%;
        transform: translate(-50%);

        .gameContent {
          width: 200px;
          position: absolute;

          display: flex;
          align-items: center;
          flex-direction: column;
          color: #fff;
          font-weight: 300;
          .zh {
            font-size: 35px;
          }
          .en {
            margin-top: 10px;
            font-size: 20px;
          }
        }
      }
    }
    .line {
      flex: 1;
      //   width: 30%;
      height: 1px;
      background-color: rgb(206, 205, 205);
    }
  }
}
</style>
